<template>
    <div class="box">
    <!-- 关注页面 -->
       <div v-for="(item,index) in newarr " :key="index">
        <router-link :to="{path:'/Caidetails',query:{ id:item.id}}">
            <div class="top">
            <div class="top-left">
                <div class="left-img">
                    <img class="top-user" :src="item.userimg">
                </div>
                <div class="left-name">
                    <span>
                        {{item.username}}
                    </span>
                    <span>
                        {{item.look}}
                    </span>
                </div>
            </div>
            <div class="top-right">
                <button class="but">收藏</button>
            </div>
            </div>

        </router-link>
            <div class="but">
                <router-link :to="{path:'/Caidetails',query:{ id:item.id}}">
                <img class="but-img" :src="item.image" alt="">
                 </router-link>
                <div class="but-text">
                   <div class="but_user_img">
                     <div v-for="i in item.collect_users" :key="i.id">
                          <div class="but_img">
                           <img class="user_header01" :src="i.p" alt="">
                      </div>
                     </div>
                  
                    <span>{{item.love_count}}</span>
                   </div>
                    <div class="but-icon">
                        <img class="xing" v-if="item.inopent" src="../assets/img/xing_on.png" @click="goto(index)">
                        <img class="xing" v-else src="../assets/img/xing_no.png" alt=""  @click="goto(index)">
                    </div>
                </div>
          
                <div>
                    <span>
                       {{item.title}}
                    </span>
                </div>
                
        </div>
       
       </div>
       <div class="kong"></div>
    </div>
</template>

<script>
import  {getlist}  from "../api/index";
export default {
    data(){
        return {
           id:"",
           isopen:true,
           newarr:[],
        }
    },
    methods:{
        goto(index){
        if(this.newarr[index].inopent === false){
            this.newarr[index].inopent= true
           console.log(this.newarr[index]);
        }else{
            this.newarr[index].inopent =false
        }
        console.log(this.newarr[index].inopent);
        
        
    }
    },
    async created(){
        await getlist()
        .then(
            Error=>{
                console.log(Error);
                
                let {state,result:{list}} = Error
                if(state == "success"){
                    let newlist = list.filter(i=>{
                        return i.type==1
                    })
                         let arr = newlist.map((item)=>{
                            console.log(item);
                            return{
                                collect_users:item?.r?.collect_users,
                                username:item?.r?.a?.n,
                                userimg:item?.r?.a?.p,
                                title:item?.r?.n,
                                look:item?.r?.vc,
                                love_count:item?.r?.collect_count_text,
                                image:item?.r?.img,
                                id:item?.r?.id,
                                inopent:false
                            }
                        
                        })
                       
                    console.log(arr);
                    this.newarr = arr
                    
                    
                }
            }
        ) 
    }
}


</script>
<style scoped lang="less">
@import "../assets/gong.less";

.kong{
    width: 100%;
    height: 45px;
}
.top{
    margin-top: 30px;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .left-name{
         font-size: @zhufont;
         margin-left: 8px;
         display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: flex-start;
    }
    .left-img{
        .top-user{
            width: 40px;
            height: 40px;
            border-radius: 50%;
        }
       

    }
    .top-right{
        .but{
            width: 60px;
            height: 30px;
            font-size: @zhufont;
            padding:4px 5px;
            border-radius: 20px;
            border: 0;
            background-color:@backcolor ;
        }
    }
    .top-left{
        display: flex;
    }
}

.but{
     background-color: #fff;
    .but-img{
        width: 100%;
        height: 300px;
    }
    .but-text{
        display: flex;
        justify-content: space-between;
        align-items: center;
        .but_user_img{
            display: flex;
              align-items: center;
                justify-content:center;
            .but_img{
                width: 22px;
                height: 32px;
                position: relative;
              
            }
            span{
                 margin-left:15px ;
            }
        }
        .user_header01{
            width: 30px;
            height: 30px;
            border-radius:50% ;
            left: 5px;
            position:absolute;
              
        }

        .but-icon{
            display: flex;
            align-items: center;
        }
    }

}
</style>